<template>
	<!-- <view>
		这是购物车页面
	</view> -->
	<view class="box">
		<view class="car" v-for="item in CartItem" :key="item.id">
			<view class="title">
				<view class="check">
					 <evan-checkbox v-model="item.isChecked"></evan-checkbox>
				</view>
				<view class="nav" >
					<image :src="item.productPic"></image>
					<view class="nav-b">
						<view class="cname">{{item.productName}}</view>
						<view class="serial">
							<view>编号:{{item.productSkuId}}</view>
							<view>价格:￥{{item.price}}</view>
						</view>
						<view class="nums">数量：{{item.quantity}}</view>
					</view>
				</view>
			</view>
			<view class="num">
				<view class="jian" @click="jian(item)">-</view>
				<view class="numss"><input type="text" :value="item.quantity" /></view>
				<view class="jia" @click="jia(item)">+</view>
			</view>
		</view>
		<view class="Allchecked">
			<view class="All">
				全选<evan-checkbox v-model="isAllChecked"></evan-checkbox>
			</view>
			<view class="Alls">
				<view >合计:￥<text class="totals">{{price}}</text></view>
				<view class="settlement" @tap="settlements">结算</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import {findAllCartItem,delCartItems} from "../../../api/home/goods/car/index.js"
	import {addPreOrder} from "../../../api/mine/car/index.js"
	import mix from "@/mixins/index.js"
	export default {
		name:"Cart",
		comments:{},
		mixins:[mix],
		data() {
			return {
				//商品列表
				CartItem:[],
				isChecked:false,
				// //购物车id
				// cartId:[],
				// //商品id
				// productId:[],
				// //购买数量
				// productQuantity:[],
				// //购买的数量id
				// productSkuId:[],
				// ids:"",
			};
		},
		methods:{
			init(){
				// 获取到购物车信息
				// 获取到购物车信息
				findAllCartItem().then(res=>{
					// console.log(res)									
					res.data.items.forEach(ele=>{
					ele.isChecked=false;
					})
					this.CartItem=res.data.items										
				});						
			},
			//加数据
			jia(e){
				e.quantity++;
			},
			//减数据
			jian(e){
				var _this=this;
					if(e.quantity<=1){
						uni.showModal({
							title:"确定要删除吗",
							 success: function (res) {
							        if (res.confirm) {
										// console.log(index.memberId)
							            delCartItems([e.id]
										).then(res=>{
											// console.log(res)
											if(res.success){
												uni.showToast({
													title: "删除成功",
												})
												
											}
											_this.init();
										})										
									}else{
										alert("取消了")
									}
								}
						})
					}else{
						e.quantity--;
					}
					
			},
			//结算
			settlements(){
				var cars=this.CartItem.filter(el=>el.isChecked==true);
				var _this=this
				if(cars==0){
					uni.showToast({
					    title: '请选择商品',
					    duration: 2000,
					});
					return false;
				}else{
					// var _this=this;
					var orderInfo={
						orderItemList:[],
					}
					for(var i=0;i<cars.length;i++){
						orderInfo.orderItemList.push({
							cartId:cars[i].id,
							productId:cars[i].productId,
							productQuantity:cars[i].quantity,
							productSkuId:cars[i].productSkuId,
						})
						
					}
					// console.log(this.cartId)
					addPreOrder(orderInfo).then(res=>{
						console.log(res)
						if(res.message){
							uni.showToast({
							    title: '购买成功,正在为你跳转订单页面',
							    duration: 2000,
								icon:"none",
							});
							setTimeout(()=>{
								uni.navigateTo({
									url:`../../home/goods/payment/payment?id=${res.data.orderId}`,
								})
							},1000)
						}
						// this.ids=res.data.orderId
						
					})
					
					
				}
				
			}
		},
		computed:{
			isAllChecked:{			
				get(){
					if(this.CartItem.every(item=>item.isChecked)){
						return true;
					}
				},
				set(e){
					// console.log(e)
					this.CartItem.forEach(ele=>ele.isChecked=e)
				}
			},
			price(){
				return this.CartItem.reduce((total,current)=>{
				  if(current.isChecked){
				      return total+current.price*current.quantity;
				  }else{
				    return total;
				  }
				},0)
			}
		},
		onLoad(){
			this.checkLogins(this.init);		
		},
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	// height: calc(100vh - 50px);
	height: 100vh;
	background: #f1ece7;
	overflow: hidden;
	.car{
		width: 85%;
		height: 110px;
		margin: 20px auto 0;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		background-color: #fff;
		border-radius: 15px;
		.title{
			width:100%;
			height: 70px;
			display: flex;
			justify-content: space-between;
			.check{
				width:10%;
				display: flex;
				align-items: center;
				padding:0 5px;
			}
			.nav{
				width:85%;
				margin-left: 10px;
				display: flex;
				justify-content: space-between;
				image{
					width: 20%;
					height: auto;
				}
				.nav-b{
					width: 80%;
					font-size: 11px;
					color: #8d8d8d;
					.cname{
						    font-size: 13px;
						    color: #3e3e3e;
					}
					
				}
			}
		}
		.num{
			width: 40%;
			height: 30px;
			display: flex;
			justify-content:space-between;
			align-items: center;
			line-height: 30px;
			text-align: center;
			view{
				width:30px;
				height: 30px;
				border-radius:40px;	
				background: #f1ece7;
			}
			.numss{
				width:45px;
				height: 30px;
			}
		}
	}
	.Allchecked{
		position:fixed;
		bottom:0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height:75px;
		background-color: #fff;
		.All{
			margin-left:30px;
			display: flex;
			align-items: center;
		}
		.Alls{
			width:70%;
			height: 100%;
			display: flex;
			justify-content:flex-end;
			align-items: center;
			.totals{
				color:#ff0000 ;
			}
			.settlement{
				width: 104px;
				height: 40px;
				background: #354e44;
				border-radius: 14px;
				color: #fff;
				font-size: 18px;
				line-height: 40px;
				text-align: center;
				margin-left: 5px;
			}
		}
		
	}
}
</style>
